<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>菜单</title>
	<script src="vue_dev.js"></script>
	<script src="vue-router.js"></script>
	<script src="axios.min.js"></script>
	<style>
	div{
		float: left;
	}
	.main{
		height: 700px;
		width: 700px;
	}
	.menulist{
		width: 300px;
		height: 700px;
		background-color: grey;
	}
	.count, .menudetails{
		width: 400px;
		height: 350px;
	}
	.count{
		background-color: red;
	}
	.menudetails{
		background-color: green;
	}
	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 6;
		background: rgba(0, 0, 0, 0.7);
	}
	.overlay td:first-child {
		width: 66px;
	}
	.overlay .con {
		position: absolute;
		width: 500px;
		height: 450px;
		background: #fff;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		padding: 20px;
	}
</style>
</head>
<body>
	<div id="app">
		<!-- 遍历menus，将其中每个元素都叫做item -->
		<li v-for="item in menus">
			<!-- 使用 router-link 组件来导航. -->
			<!-- 通过传入 `to` 属性指定路径. -->
			<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
				<!-- @click.native="get_food()" 当被渲染后的a标签被点击时，调用get_food()函数 -->
				<!-- query: {menu_name:item.menu_name} 将当前item的menu_name添加到URL查询参数，键叫menu_name.之后就可以通过this.$router.query.menu_name的方式使用该参数 -->
			<router-link @click.native="get_food()" :to="{path:'/test',query:{menu_name:item.menu_name}}">	<!-- 输出当前item的menu_name -->
				{{item.menu_name}}
			</router-link>
			<a href="javascript:" @click="update_menu(item.menu_id,item.menu_name)">修改</a>
			<a href="javascript:" @click="delete_menu(item.menu_id,item.menu_name)">删除</a>

		</li>
		<!-- 遍历fenlie，将其中每个元素都叫做item -->
		<p v-for="item in fenlei">
			<!-- 输出当前item的hun，su -->
			荤菜数量:{{item.hun}}
			素菜数量:{{item.su}}
		</p>
		<!-- 路由匹配到的组件将渲染在router-view里 -->
		<router-view></router-view>
		<div id="food">
				<!-- 遍历food_data，将其中每个元素都叫做item，输出item的f_name() -->
			<p v-for="item in food_data">
				{{item.f_name}}
			</p>
		</div>
		<input type="button" value="新增" class="add" @click="add">
		<model :foodlist='menu_food_materia_list' :menu_food_materia='menu_food_materia' :list='selectedlist'  :isactive="isActive" v-cloak @change="changeOverlay" @modify="modify"></model>
	</div>
	
	<script>
		//窗口组件
		var model = Vue.component('model', {
			//接收父组件传递过来的数据，其中
			//foodlist是所有的食材数据，用来循环生成复选框
			//list是menus中某道菜的菜品数据，用来显示
			//isactive是控制窗口（整个组件）的隐藏与显示
			//menu_food_materia是当前菜品的所用食材
			props: [ 'foodlist','list','isactive','menu_food_materia'],
			data(){
            return {
            	//由于子组件无法修改父组件传递过来的数据，所以将数据给自己复制一份，修改自己的那份数据
              	menu_food_materia2:this.menu_food_materia
          }
        },
        watch:{
        	//由于props里的数据不能直接赋值给data域，所以需要用watch
        	menu_food_materia(val){
        		this.menu_food_materia2 = val;
        	}
        },
        	//组件模板
			template: `<div class="overlay" v-show="isactive">
			<div class="con">
			<h2 class="title">添加菜品</h2>
			<div class="content">
			<table>
			<tr>
			<td>菜名</td>
			<td><input type="text" v-model="modifylist.menu_name"></td>			
			</tr>
			<tr>
			<td>单价</td>
			<td><input type="text" v-model="modifylist.menu_unit_price"></td>			
			</tr>
			<tr>
			<td>重量(克)</td>
			<td><input type="text" v-model="modifylist.menu_weight"/></td>
			</tr>
			<tr>
			<td>辣度</td>
			<td>
			<label><input type="radio" name="menu_spicy" value="1" v-model="modifylist.menu_spicy">不辣</label>
			<label><input type="radio" name="menu_spicy" value="2" v-model="modifylist.menu_spicy">微辣</label>
			<label><input type="radio" name="menu_spicy" value="3" v-model="modifylist.menu_spicy">中辣</label>
			<label><input type="radio" name="menu_spicy" value="4" v-model="modifylist.menu_spicy">麻辣</label>
			</td>
			</tr>
			<tr>
			<td>食材</td>
			<td>
			<label v-for="shicai in foodlist">
			<input type="checkbox" v-model="menu_food_materia2" :value="shicai.foodname">{{shicai.foodname}}
			</label>
			</td>
			</tr>

			<tr>
			<td>菜系</td>
			<td>
			<label><input type="radio" v-model="modifylist.menu_special" value="川菜" name="menu_special">川菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="鲁菜" name="menu_special">鲁菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="粤菜" name="menu_special">粤菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="苏菜" name="menu_special">苏菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="浙菜" name="menu_special">浙菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="闽菜" name="menu_special">闽菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="湘菜" name="menu_special">湘菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="徽菜" name="menu_special">徽菜</label>
			<label><input type="radio" v-model="modifylist.menu_special" value="主食" name="menu_special">主食</label>
			</td>
			</tr>

			<tr>
			<td>菜品尺码</td>
			<td>
			<label><input type="radio" v-model="modifylist.menu_size" value="小" name="menu_size">小</label>
			<label><input type="radio" v-model="modifylist.menu_size" value="中" name="menu_size">中</label>
			<label><input type="radio" v-model="modifylist.menu_size" value="大" name="menu_size">大</label>
			<label><input type="radio" v-model="modifylist.menu_size" value="特大" name="menu_size">特大</label>
			</td>
			</tr>

			<tr>
			<td>烹饪方法</td>
			<td>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="煎" name="menu_cook_type" >煎</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="炸" name="menu_cook_type" >炸</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="煮" name="menu_cook_type" >煮</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="炒" name="menu_cook_type" >炒</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="蒸" name="menu_cook_type" >蒸</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="焖" name="menu_cook_type" >焖</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="烧" name="menu_cook_type" >烧</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="凉" name="menu_cook_type" >凉</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="汤" name="menu_cook_type" >汤</label>
			<label><input type="radio" v-model="modifylist.menu_cook_type" value="炝" name="menu_cook_type" >炝</label>
			</td>
			</tr>

			<tr>
			<td>荤素</td>
			<td>
			<label><input type="radio" v-model="modifylist.menu_veg_meat" name="menu_veg_meat" value="荤">荤菜</label>
			<label><input type="radio" v-model="modifylist.menu_veg_meat"  name="menu_veg_meat" value="素">素菜</label>
			</td>
			</tr>

			<tr>
			<td>烹饪时间</td>
			<td>
			<label><input type="radio" v-model="modifylist.menu_cook_time" name="menu_cook_time" value="10">快</label>
			<label><input type="radio" v-model="modifylist.menu_cook_time"  name="menu_cook_time" value="15">中</label>
			<label><input type="radio" v-model="modifylist.menu_cook_time"  name="menu_cook_time" value="20">慢</label>
			</td>
			</tr>

			</table>
			<p>
			<input type="button" @click="changeActive" value="取消">
			<input type="button" @click="modify" value="保存">
			</p>
			</div>
			</div>
			</div>`,
			//计算属性
			computed: {
				//调用modifylist时，将食材信息与菜品信息一起返回
				modifylist() {
					this.list.menu_food_materia = this.menu_food_materia2;
					return this.list;
				}
			},
			methods: {
				changeActive() {
            	this.$emit('change'); // 关闭窗口，修改isactive值
            },
            modify() {
           		 this.$emit('modify', this.modifylist); // 将修改后的数据传递给父组件
           		}
           	}
           });
		//定义（路由）组件
		var shicai = Vue.component('shicai',{
			template:'<li>食材</li>'
		})
		//路由表（定义路由）
		var routes = [{
			//路径
			path:'/test',
			//当访问路径时所调用的组件
			component:shicai
		}]
		//创建 router 实例，然后传 `routes` 配置
		var router = new VueRouter({
			routes// (缩写) 相当于 routes: routes
		})
		var app = new Vue({
			//挂载元素
			el:'#app',
			//数据
			data:{
				//用来保存菜单表中所有数据
				menus:null,
				//用来保存某一道菜的食材数据
				food_data:null,
				//用来保存分类数据（荤素数量）
				fenlei:null,
				//控制窗口组件显示隐藏。false隐藏，true显示
				isActive: false,
				//当窗口的保存按钮点击时判断是添加还是修改，false添加。ture修改
				selected: false,
				//给窗口组件传递的菜品数据
				selectedlist: {
				},
				//给串口传递的当前这道菜的所用食材数据
				menu_food_materia:[],
				//给窗口传递的所有食材数据
				menu_food_materia_list:null
				
			},
			//使用router
			router,
			//当挂载元素加载完成时执行的钩子函数
			mounted(){
				//获取菜单表中所有数据，然后将数据给menus
				axios
				.get('index.php?data=allMenuData')
				.then(response=>(this.menus=response.data))
				.catch(error=>{
					console.log(error)
				});
				//获取分类视图中所有数据，然后将数据给fenlie
				axios
				.get('index.php?data=fenleiData')
				.then(response=>(this.fenlei=response.data))
				.catch(error=>{
					console.log(error)
				});
				//获取食材表中所有数据，然后将数据给menu_food_materia_list
				axios
				.get('index.php?data=shicaiData')
				.then(response=>(this.menu_food_materia_list=response.data))
				.catch(error=>{
					console.log(error)
				});
				
			},

			methods:{
				get_food:function () {
					//查询某道菜的所有食材，将获取到的数据geifood_data
					axios
					.get('index.php?data='+this.$route.query.menu_name)
					.then(response=>(this.food_data=response.data))
					.catch(error=>{
						console.log(error)
					});
					
				},
				//当点击某道菜后的修改按钮时调用的函数
				update_menu:function(menu_id,menu_name){
					var _this=this;
					//获取menus表中这道菜的所有信息，然后将数据给this.selectedlist
					axios
					.get('index.php?data=id&&menu_id='+menu_id)
					.then(function(response){
						_this.selectedlist=response.data[0]
					})
					.catch(error=>{
						console.log(error)
					});
					//查询mf表中这道菜的所有食材
					axios
					.get('index.php?data=getfood&&menu_name='+menu_name)
					.then(response=>(this.menu_food_materia=response.data))
					.catch(error=>{
						console.log(error)
					});
					//显示窗口
					this.changeOverlay();
					//给selected赋值true
					this.selected=true;
				},
				delete_menu:function(menu_id,menu_name){
					axios
					.delete('index.php?menu_id='+menu_id+'&&menu_name='+menu_name)
					.then(response=>(this.menus=response.data))
					.catch(error=>{
						console.log(error);
					});

				},
				//显示窗口或者隐藏窗口
				changeOverlay:function(){
					this.isActive = !this.isActive;
				},
				//当保存按钮被点击时调用的函数
				modify:function(arr){
					//如果是修改后保存
					if (this.selected == true) {
						//将相应数据传递到后台进行更新操作。然后将更新后返回的数据给menus
						axios
						.put('index.php?menu_name='+arr.menu_name+"&&menu_unit_price="+arr.menu_unit_price+"&&menu_spicy="+arr.menu_spicy+"&&menu_weight="+arr.weight+"&&menu_special="+arr.menu_special+"&&menu_size="+arr.menu_size+"&&menu_cook_type="+arr.menu_cook_type+"&&menu_veg_meat="+arr.menu_veg_meat+"&&menu_cook_time="+arr.menu_cook_time+"&&menu_weight="+arr.menu_weight+"&&menu_id="+arr.menu_id+"&&menu_food_materia="+arr.menu_food_materia)
						.then(response=>(this.menus=response.data))
						.catch(error=>{
							console.log(error)
						});
					}else{
						//否则将相应数据传递到后台进行添加操作。然后将更新后返回的数据给menus
						axios
						.post('index.php?menu_name='+arr.menu_name+"&&menu_unit_price="+arr.menu_unit_price+"&&menu_spicy="+arr.menu_spicy+"&&menu_weight="+arr.weight+"&&menu_special="+arr.menu_special+"&&menu_size="+arr.menu_size+"&&menu_cook_type="+arr.menu_cook_type+"&&menu_veg_meat="+arr.menu_veg_meat+"&&menu_cook_time="+arr.menu_cook_time+"&&menu_weight="+arr.menu_weight+"&&menu_food_materia="+arr.menu_food_materia)
						.then(response=>(this.menus=response.data))
						.catch(error=>{
							console.log(error)
						});
					}
					//关闭窗口
					this.changeOverlay();
					//重置selected
					this.selected=false;
				},
				//当添加按钮被点击时调用的函数
				add: function () {
					//初始化selectedlist
					this.selectedlist = {
						menu_name: '',
						menu_unit_price: '',
						menu_weight:'',
						menu_spicy:1,
						menu_special:'川菜',
						menu_size:'小',
						menu_cook_type:"煎",
						menu_veg_meat:"荤",
						menu_cook_time:10
					};
					Vue.set(this.selectedlist,'menu_food_materia',["猪肉"]);
					//显示窗口
					this.isActive = true;
				},
			}
		})
	</script>
</body>

</html>








